<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
    <link rel="stylesheet" href="../css/清除默认.css">
    <!-- 引入字体图标库 -->
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/top.css">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/home.css">
    <link rel="stylesheet" href="../css/./row.css">
    <link rel="stylesheet" href="../css/classify.css">
    <link rel="stylesheet" href="../css/quick.css">
    <link rel="stylesheet" href="../css/phone.css">
    <script src="../js/jquery-3.4.1.js"></script>
    <script src="../js/主页的大图的切换.js"></script>


</head>

<body>
    <!-- 上面最大的div -->
    <div id="main">
        <div class="top">
            <!-- 顶部导航 -->
            <div class="tooldar">
                <div class="tooldar-container">
                    <!-- 左边 -->
                    <div class="left-tooldar">
                        <a href="">小米商城</a>
                        <span class="divide">|</span>
                        <a href="">MIUI</a>
                        <span class="divide">|</span>
                        <a href="">loT</a>
                        <span class="divide">|</span>
                        <a href="">云服务</a>
                        <span class="divide">|</span>
                        <a href="">金融</a>
                        <span class="divide">|</span>
                        <a href="">有品</a>
                        <span class="divide">|</span>
                        <a href="">小爱开放平台</a>
                        <span class="divide">|</span>
                        <a href="">企业团购</a>
                        <span class="divide">|</span>
                        <a href="">资质证照</a>
                        <span class="divide">|</span>
                        <a href="">协议规则</a>
                        <span class="divide">|</span>
                        <a href="">下载app</a>
                        <span class="divide">|</span>
                        <a href="">Select Location</a>
                    </div>
                    <!-- 右边 -->
                    <div class="right-tooldar">
                        <a href="">登入</a>
                        <span class="divide">|</span>
                        <a href="">注册</a>
                        <span class="divide">|</span>
                        <a href="">消息通知</a>
                        <div class="shopping">
                            <a href="">
                                <i class="iconfont icon-gouwuche"> </i> 购物车(0)
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="header">
                <div class="header-container">
                    <div class="header-logo">
                        <a href=""></a>
                    </div>
                    <div class="header-centre">
                        <ul class="header-ul">
                            <li></li>
                            <li><a href="">小米手机</a></li>
                            <li><a href="">Redmi手机</a></li>
                            <li><a href="">电视</a></li>
                            <li><a href="">笔记本</a></li>
                            <li><a href="">家电</a></li>
                            <li><a href="">路由器</a></li>
                            <li><a href="">智能硬件</a></li>
                            <li><a href="">服务</a></li>
                            <li><a href="">社区</a></li>
                        </ul>

                    </div>
                    <div class="header-search">
                        <form class="search-form" action="">
                            <input id="search" type="text" autocomplete="off"><button id="search-btn" type="submit"
                                class="iconfont">&#xe678</button>
                            <div class="search-hot-words">
                                <a href="">小米10</a>
                                <a href="">红米K30Pro</a>
                            </div>
                        </form>


                    </div>
                </div>

            </div>
        </div>
    </div>

    <!-- 导航加大图 -->
    <div class="home">
        <div class="home-container">
            <!-- 导航 -->
            <div class="left-nav">
                <ul class="home-ul">
                    <li>
                        <a href="">手机 电话卡</a>
                        <i class="iconfont icon-jiantouarrow487"></i>
                    </li>
                    <li>
                        <a href="">电视 盒子</a>
                        <i class="iconfont icon-jiantouarrow487"></i>
                    </li>
                    <li>
                        <a href="">笔记本 显示屏 平板</a>
                        <i class="iconfont icon-jiantouarrow487"></i>
                    </li>
                    <li>
                        <a href="">家电 插线板</a>
                        <i class="iconfont icon-jiantouarrow487"></i>
                    </li>
                    <li>
                        <a href="">出行 穿戴</a>
                        <i class="iconfont icon-jiantouarrow487"></i>
                    </li>
                    <li>
                        <a href="">智能 路由器</a>
                        <i class="iconfont icon-jiantouarrow487"></i>
                    </li>
                    <li>
                        <a href="">电源 配件</a>
                        <i class="iconfont icon-jiantouarrow487"></i>
                    </li>
                    <li>
                        <a href="">健康 儿童</a>
                        <i class="iconfont icon-jiantouarrow487"></i>
                    </li>
                    <li>
                        <a href="">耳机 音响</a>
                        <i class="iconfont icon-jiantouarrow487"></i>
                    </li>
                    <li>
                        <a href="">生活 箱包</a>
                        <i class="iconfont icon-jiantouarrow487"></i>
                    </li>
                </ul>
            </div>
            <!-- 大图 -->
            <div class="big-img">
                <ul class="big-img-ul">
                    <li class="li_img1">
                        <a href="">
                            <img src="../img/手表.jpg" alt="k30">
                        </a>
                    </li>
                    <li class="li_img2">
                        <a href="">
                            <img src="../img/放不了8k的电视.jpg" alt="k30">
                        </a>
                    </li>
                    <li class="li_img3">
                        <a href="" >
                            <img src="../img/k30pro.jpg" alt="k30">
                        </a>
                    </li>
                    <li class="li_img4">
                        <a href="">
                            <img src="../img/饮水机.jpg" alt="k30">
                        </a>
                    </li>
                    <li class="li_img5">
                        <a href="">
                            <img src="../img/红米手机.jpg" alt="k30">
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 大图的小点点 -->
            <div class="dot">
                <a class="the" href=""></a>
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
            </div>
            <!-- 左右两个切换图片的 -->
            <div class="btn">
                <i class="iconfont icon-jiantou-zuo big-left"></i>

                <i class="iconfont icon-jiantou-you big-right"></i>
            </div>
        </div>
    </div>
    <!-- 横着的四个 -->
    <div class="row">
        <div class="row-container">
            <!-- 六个黑色的 -->
            <div class="six-nav">
                <ul>
                    <li>
                        <a>
                            <i class="iconfont icon-miaobiao"></i> 小米秒杀
                        </a>
                    </li>
                    <li>
                        <a>
                            <i class="iconfont icon-chengshijilianguanli"></i> 企业团购
                        </a>
                    </li>
                    <li>
                        <a>
                            <i class="iconfont icon-Fma"></i> F码通道
                        </a>
                    </li>
                    <li>
                        <a>
                            <i class="iconfont icon-card"></i> 米粉卡
                        </a>
                    </li>
                    <li>
                        <a>
                            <i class="iconfont icon-yijiuhuanxin"></i> 以旧换新
                        </a>
                    </li>
                    <li>
                        <a>
                            <i class="iconfont icon-24huafei"></i> 话费充值
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 三个图片 -->
            <div class="three-img">
                <ul class="three-ul">
                    <li>
                        <a>
                            <img class="three" src="../img/红米note8.jpg">
                        </a>
                    </li>
                    <li>
                        <a>
                            <img class="three" src="../img/红米k30.jpg">
                        </a>
                    </li>
                    <li>
                        <a>
                            <img class="three" src="../img/小米手环4.jpg">
                        </a>
                    </li>
                </ul>
            </div>
        </div>

    </div>
    <!-- 商品的分类 -->
    <div class="classify">
        <!-- 小米闪购 -->
        <div class="quick">
            <div class="quick-container">
                <div class="quick-title">
                    <h2 class="classify-title">小米闪购</h2>
                    <div class="quick-btn">
                        <i class="iconfont icon-jiantou-you quick-right"></i>
                        <i class="iconfont icon-jiantou-zuo quick-left"></i>
                    </div>
                </div>

                <div class="quick-row">
                    <div class="quick-time">
                        <div class="quick-reservetime">14:00 场</div>
                        <i class="iconfont icon-shandian-shi"></i>
                        <div class="quick-end">距离结束还有</div>
                        <div class="quick-endtime">
                            <span>12</span>
                            <i>:</i>
                            <span>09</span>
                            <i>:</i>
                            <span>45</span>
                        </div>
                    </div>
                    <div class="quick-item">
                        <ul class="quick-item-ul">
                            <li>
                                <a href="">
                                    <div class="quick-ul-container">
                                        <div class="classify-small">
                                            <img src="../img/空气净化器.png">
                                        </div>
                                        <div class="introduce">
                                            <h2>小米空气净化器</h2>
                                            <p>空气净化器，净化空气</p>
                                            <p>
                                                <span>1020</span>元
                                                <del>1900元</del>
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <div class="quick-ul-container">
                                        <div class="classify-small">
                                            <img src="../img/小米摄像头.png">
                                        </div>
                                        <div class="introduce">
                                            <h2>老王摄像头</h2>
                                            <p>不要小看，防盗防贼防老王</p>
                                            <p>
                                                <span>190</span>元
                                                <del>19000元</del>
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <div class="quick-ul-container">
                                        <div class="classify-small">
                                            <img src="../img/小米耳机.png">
                                        </div>
                                        <div class="introduce">
                                            <h2>耳机</h2>
                                            <p>清脆入耳，震聋你的猪耳</p>
                                            <p>
                                                <span>不要钱</span>
                                                <del>100元</del>
                                            </p>
                                        </div class="introduce">
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <div class="quick-ul-container">
                                        <div class="classify-small">
                                            <img src="../img/小米手环2.png">
                                        </div>
                                        <div class="introduce">
                                            <h2>破手环</h2>
                                            <p>检测心跳，看你嗝屁了吗</p>
                                            <p>
                                                <span>10</span>元
                                                <del>50元</del>
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="Vertical-img">
            <a href="">
                <img src="../img/k30pro横图.jpg" alt="">
            </a>
        </div>
        <!-- 手机的分类 -->
        <div class="brick-box">
            <div class="brick-box-container">
                <div class="brick-box-title">
                    <h2 class="classify-title">手机</h2>
                    <div class="brick-box-more">
                        <a href="">
                            查看更多<i class="iconfont icon-jiantouarrow487"></i>
                        </a>
                    </div>
                </div>
                <div class="brick-box-main">
                    <div class="brick-box-bigimg">
                        <a href="">
                            <img class="brick-box-bigimg-Alpha" src="../img/小米Alpha.jpg">
                        </a>
                    </div>
                    <div class="brick-box-eight">
                        <ul class="brick-box-ul">
                            <li class="brick-box-ul-li">
                                <a href="">
                                    <div class="brick-box-ul-container">
                                        <div class="small-img">
                                            <img src="../img/小米10小图.png">
                                        </div>
                                        <div class="introduce">
                                            <h2>小米10</h2>
                                            <p>骁龙865/1亿像素相机</p>
                                            <p>
                                                <span>3999</span>元起
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="brick-box-ul-li">
                                <a href="">
                                    <div class="brick-box-ul-container">
                                        <div class="small-img">
                                            <img src="../img/k30pro小图.png">
                                        </div>
                                        <div class="introduce">
                                            <h2>Redmi K30 Pro</h2>
                                            <p>双模5G 骁龙865，弹出全面屏</p>
                                            <p>
                                                <span>2999</span>元起
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </li class="brick-box-ul-li">
                            <li class="brick-box-ul-li">
                                <a href="">
                                    <div class="brick-box-ul-container">
                                        <div class="small-img">
                                            <img src="../img/k30pro变焦版小图.png">
                                        </div>
                                        <div class="introduce">
                                            <h2>Redmi K30 Pro 变焦版</h2>
                                            <p>双模5G 骁龙865，弹出全面屏</p>
                                            <p>
                                                <span>3799</span>元起
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="brick-box-ul-li">
                                <a href="">
                                    <div class="brick-box-ul-container">
                                        <div class="small-img">
                                            <img src="../img/小米10pro小图.png">
                                        </div>
                                        <div class="introduce">
                                            <h2>小米10</h2>
                                            <p>骁龙865/5倍变焦</p>
                                            <p>
                                                <span>4999</span>元起
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="brick-box-ul-li">
                                <a href="">
                                    <div class="brick-box-ul-container">
                                        <div class="small-img">
                                            <img src="../img/k30小图.png">
                                        </div>
                                        <div class="introduce">
                                            <h2>Redmi K30</h2>
                                            <p>120Hz流速屏，全速热爱</p>
                                            <p>
                                                <span>1699</span>元起
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="brick-box-ul-li">
                                <a href="">
                                    <div class="brick-box-ul-container">
                                        <div class="small-img">
                                            <img src="../img/k305G小图.png">
                                        </div>
                                        <div class="introduce">
                                            <h2>Redmi K30 5G</h2>
                                            <p>双模5G，120Hz流速屏</p>
                                            <p>
                                                <span>1999</span>元起
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="brick-box-ul-li">
                                <a href="">
                                    <div class="brick-box-ul-container">
                                        <div class="small-img">
                                            <img src="../img/红米8小图.png">
                                        </div>
                                        <div class="introduce">
                                            <h2>Redmi 8</h2>
                                            <p>5000mAh超强续航</p>
                                            <p>
                                                <span>699</span>元起
                                                <del>799元</del>
                                            </p>

                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="brick-box-ul-li">
                                <a href="">
                                    <div class="brick-box-ul-container">
                                        <div class="small-img">
                                            <img src="../img/红米8A小图.png">
                                        </div>
                                        <div class="introduce">
                                            <h2>小米10</h2>
                                            <p>5000mAh超强续航</p>
                                            <p>
                                                <span>599</span>元起
                                                <del>699元</del>
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="Vertical-img">
            <a href="">
                <img src="../img/小米电视横图.jpg" alt="">
            </a>
        </div>
        <div class="brick-box">
            <div class="brick-box-container">
                <div class="brick-box-title">
                    <h2 class="classify-title">家电</h2>
                    <div class="tab-list">
                        <ul>
                            <li>电视影音</li>
                            <li>热门</li>

                        </ul>
                    </div>
                </div>
                <div class="brick-box-main">
                    <div class="brick-box-bigimg">
                        <a href="">
                            <img class="brick-box-bigimg-two" title="brick-box-bigimg-two-first"
                                src="../img/扫地机器人中中图.jpg">
                        </a>
                        <a href="">
                            <img class="brick-box-bigimg-two" src="../img/净水器中图.jpg">
                        </a>
                    </div>
                    <div class="brick-box-eight">
                        <ul class="brick-box-ul">
                            <li class="brick-box-ul-li">
                                <a href="">
                                    <div class="brick-box-ul-container">
                                        <div class="small-img">
                                            <img src="../img/米家空调小图.png">
                                        </div>
                                        <div class="introduce">
                                            <h2>米家空调</h2>
                                            <p>变频节能省电</p>
                                            <p>
                                                <span>1999</span>元
                                                <del>2699元</del>
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="brick-box-ul-li">
                                <a href="">
                                    <div class="brick-box-ul-container">
                                        <div class="small-img">
                                            <img src="../img/空调小图.png">
                                        </div>
                                        <div class="introduce">
                                            <h2>米家空调</h2>
                                            <p>出众静音,快熟制冷</p>
                                            <p>
                                                <span>1299</span>元
                                                <del>1799元</del>
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="brick-box-ul-li">
                                <a href="">
                                    <div class="brick-box-ul-container">
                                        <div class="small-img">
                                            <img src="../img/洗烘一体机小图.png">
                                        </div>
                                        <div class="introduce">
                                            <h2>洗烘一体机</h2>
                                            <p>智能洗烘,省心省力</p>
                                            <p>
                                                <span>2999</span>元
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="brick-box-ul-li">
                                <a href="">
                                    <div class="brick-box-ul-container">
                                        <div class="small-img">
                                            <img src="../img/电视4A小图.png">
                                        </div>
                                        <div class="introduce">
                                            <h2>小米电视4A 32寸</h2>
                                            <p>人工智能,高清液晶屏</p>
                                            <p>
                                                <span>699</span>元
                                                <del>799元</del>
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="brick-box-ul-li">
                                <a href="">
                                    <div class="brick-box-ul-container">
                                        <div class="small-img">
                                            <img src="../img/redmi洗衣机小图.png">
                                        </div>
                                        <div class="introduce">
                                            <h2>红米洗衣机</h2>
                                            <p>一键操作,父母都爱</p>
                                            <p>
                                                <span>799</span>元
                                                <del>899元</del>
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="brick-box-ul-li">
                                <a href="">
                                    <div class="brick-box-ul-container">
                                        <div class="small-img">
                                            <img src="../img/小米电视E55A小图.png">
                                        </div>
                                        <div class="introduce">
                                            <h2>小米全面屏电视E55A</h2>
                                            <p>全面屏设计,人工智能语音</p>
                                            <p>
                                                <span>1799</span>元起
                                                <del>1999元</del>
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="brick-box-ul-li">
                                <a href="">
                                    <div class="brick-box-ul-container">
                                        <div class="small-img">
                                            <img src="../img/小米游戏笔记本小图.png">
                                        </div>
                                        <div class="introduce">
                                            <h2>15.6 四核i7 16G独显 512G</h2>
                                            <p>全面均衡的笔记本</p>
                                            <p>
                                                <span>4699</span>元
                                                <del>4899元</del>
                                            </p>

                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <div class="box-last-frist">

                                        <h3>Air 13.3笔记本</h3>
                                        <p>4799元起</p>
                                        <img src="../img/笔记本air超小图.png">

                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <div class="box-last-frist">
                                        <div>浏览更多
                                            <small>热门</small>
                                        </div>
                                        <i class="iconfont icon-yuanxingjiantou"></i>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>

</html>